"use client";

import { QrCode } from "@ark-ui/react/qr-code";

export default function Sizes() {
  const sizes = [
    { size: "w-20 h-20", padding: "p-2", label: "Small", pixelSize: 2 },
    { size: "w-32 h-32", padding: "p-3", label: "Medium", pixelSize: 3 },
    { size: "w-40 h-40", padding: "p-4", label: "Large", pixelSize: 4 },
  ];

  return (
    <div className="flex items-end justify-center space-x-8">
      {sizes.map(({ size, padding, label, pixelSize }) => (
        <div key={label} className="flex flex-col items-center space-y-3">
          <QrCode.Root value="https://tarkui.com" pixelSize={pixelSize}>
            <QrCode.Frame
              className={`${size} bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg ${padding}`}
            >
              <QrCode.Pattern className="fill-gray-900 dark:fill-white" />
            </QrCode.Frame>
          </QrCode.Root>
          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
            {label}
          </span>
        </div>
      ))}
    </div>
  );
}
